<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  window.onload = function() {
    var oUl = document.getElementById('ull');
    var aLi = document.getElementsByTagName('li'); //获取所有列
    for (var i = 0; i < aLi.length; i++) {
      aLi[i].onmouseover = function () {
        this.style.background = "red";
      }
    }
  }

  //↑不使用委托

  //使用委托↓

  window.onload = function() {
    var oUl = document.getElementById('ull');
    var aLi = document.getElementsByTagName('li');

    oUl.onmouseover = function (ev) {
      var event = ev || window.event;  // 获取event对象
      var target = ev.target || ev.srcElement; // 获取触发事件的目标对象

      if (target.nodeName.toLowerCase() == 'li') {  //判断目标对象是不是li
        target.style.background = 'red';
      }

    }
  }
</script>
</body>
</html>
